<template>
  <div class="animated fadeIn">
    <!-- 首页数据看板 2018/2/28 17:19 zhangQ -->
    <Row>

      <i-col :sm="24" :md="12">
        <h3>联运e达2.1</h3>
      </i-col>
      <i-col :sm="24" :md="12"><p style="text-align: right;color: #aaa;">数据统计截止时间：{{dateTime}}</p></i-col>
    </Row>
    <Row>
      <i-col :sm="24" :md="24" v-if="showTitle1">
        <h5>联运状态统计</h5>
      </i-col>
      <div class="statistics_list">
        <div class="statistics" v-if="String(getBoardDataList.orderStatus1)!=''">
          <div class="left">
            <div class="number"><span v-text="getBoardDataList.orderStatus1"></span><span
              style="font-size: 14px;margin-left: 5px;">个</span></div>
            <div class="title">空车入线</div>
          </div>
          <div class="icon" style="background:#2058c1;">
            <Icon type="clipboard" size="50" color="white"></Icon>
          </div>
          <div class="explain">
            <p>火车进入企业铁路专用线的时间，以联运子运单为单位统计，单位个</p>
          </div>
        </div>

        <div class="statistics" v-if="String(getBoardDataList.orderStatus2)!=''">
          <div class="left">
            <div class="number"><span v-text="getBoardDataList.orderStatus2"></span><span
              style="font-size: 14px;margin-left: 5px;">个</span></div>
            <div class="title">重车出线</div>
          </div>
          <div class="icon" style="background:#20aac1;">
            <Icon type="clipboard" size="50" color="white"></Icon>
          </div>
          <div class="explain">
            <p>火车载货（即为火车重车）从企业铁路专用线发出的时间，以联运子运单为单位统计，单位个</p>
          </div>
        </div>

        <div class="statistics" v-if="String(getBoardDataList.orderStatus3)!=''">
          <div class="left">
            <div class="number"><span v-text="getBoardDataList.orderStatus3"></span><span
              style="font-size: 14px;margin-left: 5px;">个</span></div>
            <div class="title">待发运</div>
          </div>
          <div class="icon" style="background:#ebf101;">
            <Icon type="clipboard" size="50" color="white"></Icon>
          </div>
          <div class="explain">
            <p>火车重车从起发站发出之前状态为待发运，以联运子运单为单位统计，单位个</p>
          </div>
        </div>

        <div class="statistics" v-if="String(getBoardDataList.orderStatus4)!=''">
          <div class="left">
            <div class="number"><span v-text="getBoardDataList.orderStatus4"></span><span
              style="font-size: 14px;margin-left: 5px;">个</span></div>
            <div class="title">运输中</div>
          </div>
          <div class="icon" style="background:#48c120;">
            <Icon type="clipboard" size="50" color="white"></Icon>
          </div>
          <div class="explain">
            <p>多式联运站到门运输过程中，铁路运输状态为运输中</p>
          </div>
        </div>

        <div class="statistics" v-if="String(getBoardDataList.orderStatus5)!=''">
          <div class="left">
            <div class="number"><span v-text="getBoardDataList.orderStatus5"></span><span
              style="font-size: 14px;margin-left: 5px;">个</span></div>
            <div class="title">配送中</div>
          </div>
          <div class="icon" style="background:#f74658;">
            <Icon type="clipboard" size="50" color="white"></Icon>
          </div>
          <div class="explain">
            <p>多式联运站到门运输过程中，汽运运输状态为配送中</p>
          </div>
        </div>

        <div class="statistics" v-if="String(getBoardDataList.orderStatus6)!=''">
          <div class="left">
            <div class="number"><span v-text="getBoardDataList.orderStatus6"></span><span
              style="font-size: 14px;margin-left: 5px;">个</span></div>
            <div class="title">已完成</div>
          </div>
          <div class="icon" style="background:#20c18b;">
            <Icon type="clipboard" size="50" color="white"></Icon>
          </div>
          <div class="explain">
            <p>多式联运站到门运输过程中，收货人或企业签收货物，视为已完成状态</p>
          </div>
        </div>

      </div>

      <i-col :sm="24" :md="24" v-if="showTitle2">
        <h5>货物维度统计</h5>
      </i-col>
      <div class="statistics_list">

        <div class="statistics" v-if="String(getBoardDataList.sendProductWeight)!=''">
          <div class="left">
            <div class="number"><span v-text="getBoardDataList.sendProductWeight"></span><span
              style="font-size: 14px;margin-left: 5px;">吨</span></div>
            <div class="title">发货量</div>
          </div>
          <div class="icon" style="background:#E4816F;">
            <Icon type="clipboard" size="50" color="white"></Icon>
          </div>
        </div>

        <div class="statistics" v-if="String(getBoardDataList.sendContainerNum)!=''">
          <div class="left">
            <div class="number"><span v-text="getBoardDataList.sendContainerNum"></span><span
              style="font-size: 14px;margin-left: 5px;">个</span></div>
            <div class="title">发货集装箱量</div>
          </div>
          <div class="icon" style="background:#2058c1;">
            <Icon type="clipboard" size="50" color="white"></Icon>
          </div>
        </div>

        <div class="statistics" v-if="String(getBoardDataList.getProductWeight)!=''">
          <div class="left">
            <div class="number"><span v-text="getBoardDataList.getProductWeight"></span><span
              style="font-size: 14px;margin-left: 5px;">吨</span></div>
            <div class="title">到货量</div>
          </div>
          <div class="icon" style="background:#FF6766;">
            <Icon type="clipboard" size="50" color="white"></Icon>
          </div>
        </div>

        <div class="statistics" v-if="String(getBoardDataList.getContainerNum)!=''">
          <div class="left">
            <div class="number"><span v-text="getBoardDataList.getContainerNum"></span><span
              style="font-size: 14px;margin-left: 5px;">个</span></div>
            <div class="title">到货集装箱量</div>
          </div>
          <div class="icon" style="background:#0099CB;">
            <Icon type="clipboard" size="50" color="white"></Icon>
          </div>
        </div>

      </div>

      <i-col :sm="24" :md="24" v-if="showTitle3">
        <h5>运输资源统计</h5>
      </i-col>
      <div class="statistics_list">

        <div class="statistics" v-if="String(getBoardDataList.getTrainNum)!=''">
          <div class="left">
            <div class="number"><span v-text="getBoardDataList.getTrainNum"></span><span
              style="font-size: 14px;margin-left: 5px;">辆</span></div>
            <div class="title">今日到达火车数量</div>
          </div>
          <div class="icon" style="background:#9E78B3;">
            <Icon type="clipboard" size="50" color="white"></Icon>
          </div>
        </div>

        <div class="statistics" v-if="String(getBoardDataList.sendTrainNum)!=''">
          <div class="left">
            <div class="number"><span v-text="getBoardDataList.sendTrainNum"></span><span
              style="font-size: 14px;margin-left: 5px;">辆</span></div>
            <div class="title">今日发出火车数量</div>
          </div>
          <div class="icon" style="background:#636363;">
            <Icon type="clipboard" size="50" color="white"></Icon>
          </div>
        </div>

        <div class="statistics" v-if="String(getBoardDataList.fleetNum)!=''">
          <div class="left">
            <div class="number"><span v-text="getBoardDataList.fleetNum"></span><span
              style="font-size: 14px;margin-left: 5px;">个</span></div>
            <div class="title">车队数量</div>
          </div>
          <div class="icon" style="background:#2058c1;">
            <Icon type="clipboard" size="50" color="white"></Icon>
          </div>
        </div>

        <div class="statistics" v-if="String(getBoardDataList.driverNum)!=''">
          <div class="left">
            <div class="number"><span v-text="getBoardDataList.driverNum"></span><span
              style="font-size: 14px;margin-left: 5px;">人</span></div>
            <div class="title">司机数量</div>
          </div>
          <div class="icon" style="background:#2096c1;">
            <Icon type="clipboard" size="50" color="white"></Icon>
          </div>
        </div>

        <div class="statistics" v-if="String(getBoardDataList.truckNum)!=''">
          <div class="left">
            <div class="number"><span v-text="getBoardDataList.truckNum"></span><span
              style="font-size: 14px;margin-left: 5px;">辆</span></div>
            <div class="title">车辆数量</div>
          </div>
          <div class="icon" style="background:#a853f3;">
            <Icon type="clipboard" size="50" color="white"></Icon>
          </div>
        </div>

        <div class="statistics" v-if="String(getBoardDataList.mineContainerNum)!=''">
          <div class="left">
            <div class="number"><span v-text="getBoardDataList.mineContainerNum"></span><span
              style="font-size: 14px;margin-left: 5px;">个</span></div>
            <div class="title">箱子数量</div>
          </div>
          <div class="icon" style="background:#58A3E9;">
            <Icon type="clipboard" size="50" color="white"></Icon>
          </div>
        </div>

      </div>

      <i-col :sm="24" :md="24" v-if="showTitle4">
        <h5>操作维度统计</h5>
      </i-col>
      <div class="statistics_list">

        <div class="statistics" v-if="String(getBoardDataList.bindHeavyContainerNum)!=''">
          <div class="left">
            <div class="number"><span v-text="getBoardDataList.bindHeavyContainerNum"></span><span
              style="font-size: 14px;margin-left: 5px;">个</span></div>
            <div class="title">今日绑定重箱数量</div>
          </div>
          <div class="icon" style="background:#FFD234;">
            <Icon type="clipboard" size="50" color="white"></Icon>
          </div>
        </div>

        <div class="statistics" v-if="String(getBoardDataList.bindEmptyContainerNum)!=''">
          <div class="left">
            <div class="number"><span v-text="getBoardDataList.bindEmptyContainerNum"></span><span
              style="font-size: 14px;margin-left: 5px;">个</span></div>
            <div class="title">今日绑定空箱数量</div>
          </div>
          <div class="icon" style="background:#FF5B57;">
            <Icon type="clipboard" size="50" color="white"></Icon>
          </div>
        </div>
      </div>
    </Row>
    <!--<Row :gutter="16" style="display: none;">-->
    <!--<i-col :xs="24" :sm="12" :md="16" :lg="16">-->
    <!--&lt;!&ndash;<dash-chart-large></dash-chart-large>&ndash;&gt;-->
    <!--</i-col>-->

    <!--<i-col :xs="24" :sm="12" :md="8" :lg="8">-->
    <!--<div style="background-color:white;">-->
    <!--<ul>-->
    <!--<li>-->
    <!--<div class="staff_list">-->
    <!--<div class="staff_avatar">-->
    <!--<Avatar src="http://www.jq22.com/demo/AdminEx-141217204554/images/photos/user1.png" size="large"/>-->
    <!--</div>-->
    <!--<div class="staff_progress">-->
    <!--<p>-->
    <!--<span class="staff_name"> Jhon James </span>-->
    <!--<span> - Project Lead</span>-->
    <!--</p>-->
    <!--<Progress :percent="85" :stroke-width="8" status="active"></Progress>-->
    <!--</div>-->
    <!--</div>-->
    <!--<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>-->
    <!--</li>-->

    <!--<li>-->
    <!--<div class="staff_list">-->
    <!--<div class="staff_avatar">-->
    <!--<Avatar src="http://www.jq22.com/demo/AdminEx-141217204554/images/photos/user2.png" size="large"/>-->
    <!--</div>-->
    <!--<div class="staff_progress">-->
    <!--<p>-->
    <!--<span class="staff_name"> Jhon James </span>-->
    <!--<span> - Project Lead</span>-->
    <!--</p>-->
    <!--<Progress :percent="90" :stroke-width="8" status="success"></Progress>-->
    <!--</div>-->
    <!--</div>-->
    <!--<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>-->

    <!--</li>-->

    <!--<li>-->
    <!--<div class="staff_list">-->
    <!--<div class="staff_avatar">-->
    <!--<Avatar src="http://www.jq22.com/demo/AdminEx-141217204554/images/photos/user3.png" size="large"/>-->
    <!--</div>-->
    <!--<div class="staff_progress">-->
    <!--<p>-->
    <!--<span class="staff_name"> Hoffman Doe </span>-->
    <!--<span> - Support</span>-->
    <!--</p>-->
    <!--<Progress :percent="10" :stroke-width="8" status="wrong"></Progress>-->
    <!--</div>-->
    <!--</div>-->
    <!--<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>-->

    <!--</li>-->

    <!--<li>-->
    <!--<div class="staff_list">-->
    <!--<div class="staff_avatar">-->
    <!--<Avatar src="http://www.jq22.com/demo/AdminEx-141217204554/images/photos/user4.png" size="large"/>-->
    <!--</div>-->
    <!--<div class="staff_progress">-->
    <!--<p>-->
    <!--<span class="staff_name"> Jane Doe </span>-->
    <!--<span> - Marketing</span>-->
    <!--</p>-->
    <!--<Progress :percent="60" :stroke-width="8"></Progress>-->
    <!--</div>-->
    <!--</div>-->

    <!--</li>-->

    <!--</ul>-->
    <!--</div>-->

    <!--</i-col>-->

    <!--</Row>-->

    <!--<Row :gutter="16" style="display: none;">-->
    <!--<i-col :xs="12" :sm="12" :md="8" :lg="8">-->

    <!--<vue-calendar></vue-calendar>-->
    <!--</i-col>-->

    <!--<i-col :xs="12" :sm="12" :md="9" :lg="9">-->
    <!--<todo-list></todo-list>-->
    <!--</i-col>-->

    <!--<i-col :xs="24" :sm="24" :md="7" :lg="7">-->

    <!--<div class="panel blue-box twt-info">-->
    <!--<div class="panel-body">-->
    <!--<h3>19 Februay 2014</h3>-->

    <!--<p>AdminEx is new model of admin dashboard-->
    <!--<a href="#">http://t.co/3laCVziTw4</a>-->
    <!--4 days ago by John Doe</p>-->
    <!--</div>-->
    <!--</div>-->

    <!--<div class="panel" style="margin-top:30px">-->
    <!--<div class="panel-body">-->
    <!--<div class="media usr-info">-->
    <!--<a href="#" class="pull-left">-->
    <!--<img class="thumb" src="http://www.jq22.com/demo/AdminEx-141217204554/images/photos/user2.png" alt="">-->
    <!--</a>-->
    <!--<div class="media-body">-->
    <!--<h4 class="media-heading">Mila Watson</h4>-->
    <!--<span>Senior UI Designer</span>-->
    <!--<p>I use to design websites and applications for the web.</p>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--<div class="panel-footer custom-trq-footer">-->
    <!--<ul class="user-states">-->
    <!--<li>-->
    <!--<Icon type="heart" size="25"></Icon>-->
    <!--127-->
    <!--</li>-->
    <!--<li>-->
    <!--<Icon type="eye" size="25"></Icon>-->
    <!--853-->
    <!--</li>-->
    <!--<li>-->
    <!--<Icon type="person-add" size="25"></Icon>-->
    <!--311-->
    <!--</li>-->
    <!--</ul>-->
    <!--</div>-->
    <!--</div>-->

    <!--</i-col>-->

    <!--</Row>-->

  </div>
</template>
<script>
  import { getBoardData } from '@api/backEnd/mainOrder'
  import moment from 'moment'

  export default {
    name: 'index',
    data () {
      let dateTime = moment().format('YYYY-MM-DD H:mm:ss ')
      let showTitle1 = false
      let showTitle2 = false
      let showTitle3 = false
      let showTitle4 = false
      let value1 = 0
      let value2 = 0
      let value3 = 0
      let truckCount = ''
      let driverCount = ''
      let speed = 10000
      let transportationList = ''
      let distributionList = ''
      let waitingTrainList = ''
      let orderDoneList = ''
      let getBoardDataList = {
        noReadMsg: '',
        orderStatus1: '',
        orderStatus2: '',
        orderStatus3: '',
        orderStatus4: '',
        orderStatus5: '',
        orderStatus6: '',
        driverNum: '',
        truckNum: '',
        fleetNum: '',
        sendTrainNum: '',
        sendProductWeight: '',
        sendContainerNum: '',
        getTrainNum: '',
        getProductWeight: '',
        getContainerNum: '',
        bindHeavyContainerNum: '',
        bindEmptyContainerNum: '',
        mineContainerNum: ''
      }
      let datas = {
        dateTime,
        showTitle1,
        showTitle2,
        showTitle3,
        showTitle4,
        value1,
        value2,
        value3,
        truckCount,
        driverCount,
        speed,
        transportationList,
        distributionList,
        waitingTrainList,
        orderDoneList,
        getBoardDataList
      }
      return datas
    },
    computed: {},
    methods: {},
    mounted () {
      this.$Notice.success({
        title: '欢迎使用联运e达',
        duration: 3
      })
      getBoardData().then(res => {
        if (res.data.isSuccess === 1) {
          this.getBoardDataList = Object.assign(this.getBoardDataList, res.data.data.counts)
          if (String(this.getBoardDataList.orderStatus1) !== '' || String(this.getBoardDataList.orderStatus2) !== '' || String(this.getBoardDataList.orderStatus3) !== '' || String(this.getBoardDataList.orderStatus4) !== '' || String(this.getBoardDataList.orderStatus5) !== '' || String(this.getBoardDataList.orderStatus6) !== '') {
            this.showTitle1 = true
          }
          if (String(this.getBoardDataList.sendProductWeight) !== '' || String(this.getBoardDataList.sendContainerNum) !== '' || String(this.getBoardDataList.getProductWeight) !== '' || String(this.getBoardDataList.getContainerNum) !== '') {
            this.showTitle2 = true
          }
          if (String(this.getBoardDataList.getTrainNum) !== '' || String(this.getBoardDataList.sendTrainNum) !== '' || String(this.getBoardDataList.fleetNum) !== '' || String(this.getBoardDataList.driverNum) !== '' || String(this.getBoardDataList.truckNum) !== '' || String(this.getBoardDataList.mineContainerNum) !== '') {
            this.showTitle3 = true
          }
          if (String(this.getBoardDataList.bindHeavyContainerNum) !== '' || String(this.getBoardDataList.bindEmptyContainerNum) !== '') {
            this.showTitle4 = true
          }
          // console.log(this.showTitle1, this.showTitle2, this.showTitle3, this.showTitle4)
        }
      })
    },
    components: {}
  }
</script>
<style type="text/css" scoped>
  .state-overview {
    color: #fff
  }

  .state-overview .ivu-col {
    margin-bottom: 20px
  }

  .state-overview .state-value .value {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px
  }

  .state-overview .state-value .title {
    font-size: 14px
  }

  .state-value {
    width: 60%;
    display: inline-block
  }

  .symbol {
    width: 35%;
    display: inline-block
  }

  .state-overview .panel {
    border-radius: 4px;
    padding: 25px 20px
  }

  .panel.purple {
    background: #6a8abe;
    box-shadow: 0 5px 0 #5f7cab
  }

  .panel.red {
    background-color: #fc8675;
    box-shadow: 0 5px 0 #e27869
  }

  .panel.blue {
    background: #5ab6df;
    box-shadow: 0 5px 0 #51a3c8
  }

  .panel.green {
    background: #4acacb;
    box-shadow: 0 5px 0 #42b5b6
  }

  .dash_income_chart {
    float: left
  }

  .ivu-row {
    margin-bottom: 20px !important
  }

  .dash_income {
    border-radius: 4px;
    background-color: #fff;
    height: 80px;
    padding: 15px
  }

  .staff_name {
    font-weight: 900;
    font-size: 16px
  }

  .staff_progress {
    margin-left: 10px;
    width: 90%
  }

  .staff_progress p {
    margin: 0
  }

  .staff_list {
    border-radius: 4px;
    margin-top: 0;
    height: 90px;
    display: flex;
    align-items: center
  }

  .animated {
    background-color: #eff0f4
  }

  li {
    margin-bottom: 11px;
    margin-left: 10px;
    margin-right: 10px
  }

  .num {
    font-weight: 700
  }

  .time {
    font-size: 14px;
    font-weight: 700
  }

  .content {
    padding-left: 5px
  }

  .dashboard_feature {
    text-align: center
  }

  .demo-carousel {
    height: 600px;
    line-height: 200px;
    text-align: center;
    color: #fff;
    font-size: 20px;
    background: #506b9e
  }

  .demo-carousel img {
    height: 100%;
    width: 100%
  }

  h3,
  h4,
  h5 {
    margin: 12px
  }

  h3 {
    margin-bottom: 20px
  }

  p {
    margin: 12px
  }

  .row-margin-top {
    margin-top: 30px
  }

  .state-info {
    position: absolute;
    right: 15px;
    top: 20px;
    margin-bottom: 30px
  }

  .state-info .panel {
    margin-bottom: 20px;
    float: right;
    margin-left: 15px
  }

  .panel {
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
  }

  .panel-body {
    padding: 15px
  }

  .state-info .panel .summary {
    float: left;
    margin-right: 20px
  }

  .state-info .panel .summary span {
    color: #49586e;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 10px
  }

  .state-info .panel .summary h3.red-txt {
    color: #fc8675
  }

  .state-info .panel .summary h3.green-txt {
    color: #65cea7
  }

  .state-info .panel .summary h3 {
    font-size: 200%;
    font-weight: 700;
    line-height: 20px;
    margin: 0
  }

  .page-heading h3 {
    color: #49586e;
    font-size: 25px;
    font-size: 11%;
    font-weight: 400;
    margin: 10px 0
  }

  .chart-bar {
    float: right;
    margin-top: 5px
  }

  .chart-bar img {
    display: inline-block;
    width: 68px;
    height: 45px;
    vertical-align: top
  }

  @media screen and (max-width: 767px) {
    .state-info {
      position: static;
      width: 100%;
      margin-top: 15px
    }

    .state-info .panel {
      width: 100%
    }
  }

  .panel.blue-box {
    background: none repeat scroll 0 0 #5ab5de;
    box-shadow: 0 5px 0 #51a3c7;
    color: #fff
  }

  .twt-info h3 {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 900;
    margin: 10px 0 30px 0;
    text-align: center
  }

  .twt-info p {
    font-size: 18px;
    line-height: 25px;
    font-style: italic;
    margin: 0 0 20px 0;
    text-align: center
  }

  .twt-info p a {
    color: #98fdf4
  }

  .media:first-child {
    margin-top: 0
  }

  .media.usr-info > .pull-left {
    margin-right: 20px;
    margin-top: 10px
  }

  .media > .pull-left {
    margin-right: 10px
  }

  .pull-left {
    float: left
  }

  .pull-left {
    float: left !important
  }

  .custom-trq-footer {
    background: none repeat scroll 0 0 #4eb6b7 !important;
    box-shadow: 0 5px 0 #46a3a4;
    color: #fff;
    border-top: none
  }

  .panel-footer {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px
  }

  .usr-info .thumb {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    -webkit-border-radius: 50%
  }

  .usr-info img {
    vertical-align: middle
  }

  .usr-info h4 {
    color: #658585;
    margin-bottom: 0
  }

  .media-heading {
    margin: 0 0 5px
  }

  .usr-info .media-body span {
    color: #ea755c;
    font-size: 12px;
    margin-bottom: 20px;
    display: inline-block
  }

  .usr-info .media-body p {
    color: #b6bcbc
  }

  ul.user-states {
    list-style-type: none;
    padding: 20px 0
  }

  ul.user-states li {
    text-align: center;
    float: left;
    width: 33%;
    font-size: 18px;
    margin: 0
  }

  .statistics_list {
    width: 100%;
    overflow: auto;
  }

  .statistics_list .statistics {
    width: 23%;
    margin: 20px 1%;
    background: #FFFFFF;
    padding: 30px;
    overflow: auto;
    float: left;
  }

  .statistics_list .statistics .explain {
    padding-top: 8px;
    clear: both;
    width: 100%;
    height: 40px;
  }

  .statistics_list .statistics .explain p {
    margin: 0;
    font-size: 11px;
    line-height: 20px;
    color: #bbb;
  }

  .statistics_list .statistics .left {
    float: left;
    height: 60px;
  }

  .statistics_list .statistics .left .number {
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 32px;
    color: #676767;
  }

  .statistics_list .statistics .left .title {
    font-size: 14px;
    color: #AAB5BC;
    font-weight: 600;
    height: 20px;
    line-height: 20px;
    text-align: center;
  }

  .statistics_list .statistics .icon {
    float: right;
    width: 60px;
    height: 60px;
    background: #666;
    color: #FFFFFF;
    line-height: 60px;
    font-size: 40px;
    text-align: center;
  }

  .statistics_list .statistics .icon i {
    font-size: 40px;
    line-height: 60px;
  }

</style>
